<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/jquery.min.js"></script>
	<link rel="stylesheet" href="../webjars/bootstrap/3.3.7-1/css/bootstrap.css">
	<link rel="stylesheet" href="../static/jquery-easyui-1.5.5.3/themes/material-teal/easyui.css" />
	<link rel="stylesheet" href="../static/jquery-easyui-1.5.5.3/themes/icon.css" />
	<link rel="stylesheet" href="../static/personForm.css">
	<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../webjars/bootstrap/3.3.7-1/js/bootstrap.js"></script>
	<script type="text/javascript" src="../static/personForm.js"></script>
	
</head>
<body>
<div style="padding: 20px;">
	<form id="mysearch">
		<input type="hidden" name = "id" id="id">
		<div class="col-md-3">			
			<div class="input-group">
				<span class="input-group-addon">用户名</span>
				<input type="text" class="form-control" name="username" placeholder="用户名">
			</div>
		</div>
		<div class="col-md-3">			
			<div class="input-group">
				<span class="input-group-addon">姓名</span>
				<input type="text" class="form-control" name="name" placeholder="姓名">
			</div>
		</div>
		<div class="btn-group">
			<button id="searchbtn" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> 查询</button>
			<button id="clearbtn" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> 清空</button>
		</div>
	</form>
</div>
<table id="t_student"></table>

<script type="text/javascript">
		$(function(){
			$("#t_student").datagrid({
				idField:'id',
				title: '学生列表',
				width: '100%',
				fitColumns: true,
				striped: true,
				loadMsg: '数据正在加载...',
				rownumbers: true,
				url: 'listStudent',
				pagination: true,
				pageSize:10,
				pageList: [ 10, 20, 25, 50],
				frozenColumns: [
					[
						{field: 'ck',width: 50,checkbox: true}
					]
				],
				columns:[
					[
						{field: 'id',title: '唯一标识',width: 50,align: 'center'}, 
						{field:'username',title:'用户名',width: 100,align: 'center'},
						{field:'name',title:'姓名',width: 100,align: 'center'},
						{field:'sex',title:'性别',width: 100,align: 'center'},
						{field:'age',title:'年龄',width: 100,align: 'center'},
						{field:'phone',title:'联系电话',width: 100,align: 'center'},
						{field:'bj',title:'班级',width: 100,align: 'center',
							formatter: function(value){   //easyui取嵌套类对象的值
										return value.bjName;
									} },
						{field:'ranmek',title:'备注',width: 100,align: 'center'},
						{field: 'reset',title: '操作',width: 100,align: 'center',formatter:add}
						]
					],
				toolbar:[
					{
						text:'添加学生',
						iconCls:'icon-add',
						handler:function(){
							$('#mydialog').dialog({
								title: '添加学生',
								modal:true		
							});
							$('#myform input').val("");
							$('#mydialog').dialog('open');
							$('#man').val('男');
							$('#girl').val('女');
							
						}
					},{
						text:'修改学生',
						iconCls:'icon-edit',
						handler:function(){
							var arr = $('#t_student').datagrid('getSelections');
							if(arr.length != 1){
								$.messager.show({
									title: '提示信息',
									msg: '只能选中一行记录进行修改！'
								});									
							}else{
								//更改标题
								$('#mydialog').dialog({
									title: '修改学生',
									modal:true
								});
								$('#mydialog').dialog('open');
								//$('#myform input').val("");
								$('#myform').form('reset');
								
								$('#myform').form('load',{
									id:arr[0].id,
									username:arr[0].username,
									password:arr[0].password,
									name:arr[0].name,
									sex:arr[0].sex,
									age:arr[0].age,
									phone:arr[0].phone,
									ranmek:arr[0].ranmek,
									bj:arr[0].bj.id
								});
							}
						}
					},{
						text:'删除学生',
						iconCls:'icon-remove',
						handler:function(){
							var arr = $('#t_student').datagrid('getSelections');
							if(arr.length<=0){
								$.messager.show({
									title: '提示信息',
									msg: '至少选中一行记录进行删除！'
								});
							}else{
								$.messager.confirm('提示信息', '确认删除'+arr.length+'条数据？', function(data){
									if(data){
										var ids = '';
										for(var i = 0; i < arr.length; i++){
											ids += arr[i].id + ',';
										}
										ids = ids.substring(0, ids.length-1);	
										$.post('delete',{ids:ids},function(){
											$('#t_student').datagrid('reload');
											$('#t_student').datagrid('unselectAll');
											$.messager.show({
												title: '提示信息',
												msg: '操作成功！'
											});
										});
									}else{
										return;
									}
								});
							}
						}
					}
				]
			});
			function add(value,row,index){
				return "<a class='easyui-linkbutton' onclick='reset("+row.id+");'>重置密码</a>";
			}
			//确定提交方法
			$('#btn1').click(function(){
				if($('#myform').form('validate')){
					$.ajax({
						type:'post',
						url:'studentSave',
						cache:false,
						data:$('#myform').serialize(),
						success:function(data){
							$('#mydialog').dialog('close');
							
							$('#t_student').datagrid('reload');
							$.messager.show({
								title:'提示信息',
								msg:'操作成功！'
							});
						}
					});
				}else{
					$.messager.show({
						title:'提示信息',
						msg:'验证不通过，不能保存！'
					});
				}
			});
			$("#btn2").click(function(){
				$("#mydialog").dialog('close');
			});
			$('#searchbtn').click(function(){
				$('#t_student').datagrid('load',serializeForm($('#mysearch').form()));
			});
			$('#clearbtn').click(function(){
				$('#mysearch').form('clear');
				$("#t_student").datagrid('load', {});
			});
			$('#username').textbox({
				onChange:function(value){
					$.post('only',{username:value},function(data){
						$("#username_error").html(data);			
					});
				}
			});
		
		});	
		
		function reset(id){
			if(confirm("确定重置密码？")){
				$.post('reset', {id: id}, function(data){
					alert(data);
				});
			}
		}
		//js方法，序列化表单，因为查询不传值去后台，无法辨认传的参数是否有
		function serializeForm(form){
			var obj = {};
			$('#id').val("1");
			$.each(form.serializeArray(), function(index){
				if(obj[this['name']]){
					obj[this['name']] = obj[this['name']] + ',' + this['value'];
				}else{
					obj[this['name']] = this['value'];
				}
			});
			return obj;
		}
	</script>
	

<div id="mydialog"  class="easyui-dialog" closed=true >
	<form id = "myform" class="custom-form" style="padding-top: 10px;">
		<input type="hidden" name="id">
		<p><label>用户名：</label>
		<input type="text" name="username" class="easyui-textbox" id="username" data-options="required:true,prompt:'请输入用户名'" th:onchange="'javascript:only(this.value);'"></p>
		<span id="username_error" style="color: red;margin-right: 50px;"></span>
		<p><label>密码：</label>
		<input type="text" class="easyui-textbox" data-options="prompt:'默认密码111'," disabled="disabled"></p>
		<p><label>姓名：</label>
		<input type="text" name="name" class="easyui-textbox" id="name" data-options="required:true,prompt:'请输入姓名'"></p>
		<p style="margin-right: 82px;"><label>性别：</label>
			<input type="radio" checked  name="sex" id="man" value="男"> 男
			<input type="radio" name="sex" id="girl" value="女"> 女
		</p>
		<p ><label>年龄：</label>
		<input type="text" name="age" class="easyui-textbox" id="age" data-options="required:true,prompt:'请输入年龄'"></p>
		<p><label>联系电话：</label>
		<input type="text" name="phone" class="easyui-textbox" id="phone" data-options="required:true,prompt:'请输入电话'"></p>
		<p>
			<label>所在班级：</label>	
			<select name="bj_id" style="width: 150px;">
				<option th:each="bj:${bjs}" th:value="${bj.id}" th:text="${bj.bjName}"></option>
			</select>
		</p>
		<p><label>备注：</label>
			<input type="text" name="ranmek" class="easyui-textbox" data-options="prompt:'请输入备注'" value=""></p>
		<p>
			<a id="btn1" class="easyui-linkbutton" iconCls="icon-save">确定</a>
			<a id="btn2" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
		</p>
	</form>
</div>
</body>
</html>